@use "sass:map";

// Define and overwrite Bootstrap Variables
// See bootstrap/scss/_variables.scss for a complete list of definitions, or
// individual component pages in the Bootstrap 5.2 docs for relevant variable usage.

//////////////////////////
//// Custom variables ////
//////////////////////////

// Custom theme color mapping
$brand: #e0a335;
$success: #1eff00;

$death-knight: rgb(194, 46, 70);
$druid:        rgb(255, 125, 10);
$hunter:       rgb(171, 212, 115);
$mage:         rgb(105, 204, 240);
$paladin:      rgb(245, 140, 186);
$priest:       rgb(255, 255, 255);
$rogue:        rgb(255, 245, 105);
$shaman:       rgb(36, 89, 255);
$warlock:      rgb(148, 130, 201);
$warrior:      rgb(199, 156, 110);

$class-colors: (
  "death-knight": $death-knight,
  "druid":        $druid,
  "hunter":       $hunter,
  "mage":         $mage,
  "paladin":      $paladin,
  "priest":       $priest,
  "raid":         $brand,
  "rogue":        $rogue,
  "shaman":       $shaman,
  "warlock":      $warlock,
  "warrior":      $warrior,
);

$custom-colors: (
  "brand": $brand,
  "primary": $primary,
  "success": $success,
);

$custom-breakpoints: (
  xxxl: 1600px,
  1080p: 1900px,
  1440p: 2500px,
  4k: 3800px,
);

// Borders
$border-color: dimgrey;
$border-default: 1px solid $border-color;

// Colors
$item-quality-junk:      #9d9d9d;
$item-quality-common:    #ffffff;
$item-quality-uncommon:  #1eff00;
$item-quality-rare:      #0070dd;
$item-quality-epic:      #a335ee;
$item-quality-legendary: #ff8000;
$item-quality-artifact:  #e5cc80;
$item-quality-heirloom:  #0cf;

$item-qualities: (
  junk:      $item-quality-junk,
  common:    $item-quality-common,
  uncommon:  $item-quality-uncommon,
  rare:      $item-quality-rare,
  epic:      $item-quality-epic,
  legendary: $item-quality-legendary,
  artifact:  $item-quality-artifact,
  heirloom:  $item-quality-heirloom
);

$link-danger-color:  #ef9eaa;
$link-warning-color: #faf07f;

$table-row-even-bg: #202128;
$table-row-odd-bg: #2d2f35;

$wrath-blue: #7FCBD8;

// Spacers
$block-spacer: .75rem;
$table-cell-padding: .5rem;
$content-font-size: .75rem;
$gap-width: 1.5rem;
$gap-width-sm: .5rem;

// Sizing
$icon-size-sm: 1rem;
$icon-size-md: 2.5rem;

// Z-index variables
$header-z-index: 100;
$sidebar-z-index: 200;

/////////////////////////////////////////////
//// Global Bootstrap variable overrides ////
/////////////////////////////////////////////

// Map overrides
$theme-colors: map-merge($theme-colors, $class-colors);
$theme-colors: map-merge($theme-colors, $custom-colors);
$grid-breakpoints: map-merge($grid-breakpoints, $custom-breakpoints);

$body-bg: #15171e;
$body-color: white;
$font-size-root: 16px;
$grid-gutter-width: .75rem;

// This option doesn't seem to be working for some reason. Carets hidden manually instead
// $enable-caret: false;
$enable-negative-margins: true;
$enable-rounded: false;

$link-color: #a5b1d6;
$link-decoration: none;
$link-hover-color: white;
$link-transition: color .15s ease-in-out;

// Component variable overrides
$btn-hover-bg-shade-amount: 30%;
$btn-font-size: .875rem;
$btn-padding-y: .5rem;

$dropdown-bg: $body-bg;
$dropdown-border-width: 0;
$dropdown-color: white;
$dropdown-link-active-bg: $dropdown-bg;
$dropdown-link-color: white;
$dropdown-link-hover-color: white;
$dropdown-link-hover-bg: darken($dropdown-bg, 3);
$dropdown-padding-y: 0;

$form-check-input-bg: $link-color;
$form-check-input-border: 1px solid lighten($body-bg, 20);
$form-check-input-width: 2rem;
$form-check-input-focus-border: lighten($body-bg, 20);
$form-check-input-focus-box-shadow: 0 0 .25rem $primary;
$form-check-input-checked-bg-color: $primary;
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{color-contrast($primary)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
$form-check-input-checked-border-color: lighten($body-bg, 20);

$form-label-margin-bottom: .25rem;
$form-label-font-size: $content-font-size;
$form-label-font-weight: normal;

$form-select-bg: lighten($body-bg, 12);
$form-select-border-color: lighten($body-bg, 20);
$form-select-color: white;
$form-select-disabled-bg: lighten($body-bg, 20);
$form-select-focus-border-color: lighten($body-bg, 20);
$form-select-focus-box-shadow: 0 0 .25rem lighten($body-bg, 20);
$form-select-font-size: $content-font-size;
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");

$input-bg: lighten($body-bg, 12);
$input-border-color: lighten($body-bg, 20);
$input-color: white;
$input-disabled-bg: lighten($body-bg, 20);
$input-focus-bg: lighten($body-bg, 12);
$input-focus-border-color: lighten($body-bg, 20);
$input-focus-box-shadow: 0 0 .25rem lighten($body-bg, 20);
$input-focus-color: white;
$input-font-size: $content-font-size;

$modal-content-bg: $body-bg;
$modal-content-border-color: $link-color;
$modal-footer-margin-between: 0px;
$modal-header-border-color: $border-color;
$modal-header-padding: 1.25rem;
$modal-inner-padding: 1.25rem;

$navbar-dark-color: white;
$navbar-dark-hover-color: $primary;
$navbar-dark-active-color: $primary;
$navbar-padding-y: 0;

$nav-link-font-size: .875rem;
$nav-link-padding-y: map.get($spacers, 3);
$nav-link-transition: $link-transition;

$nav-tabs-border-color: $border-color;
$nav-tabs-link-active-bg: transparent;
$nav-tabs-link-active-color: white;

$popover-bg: #424557;
$popover-body-color: white;
$popover-body-padding-x: map.get($spacers, 2);
$popover-body-padding-y: map.get($spacers, 2);

$tooltip-bg: $popover-bg;
$tooltip-max-width: 15vw;
$tooltip-max-width-lg: 25vw;
$tooltip-max-width-sm: 75vw;
